﻿<!--
 * @Author: your name
 * @Date: 2021-04-21 10:37:00
 * @LastEditTime: 2021-09-26 19:12:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /lego-nuxt/components/properties/NavigateEditor/index.vue
-->
<template>
  <div class="navigate_cssEditor">
    <editor-panel title="导航属性">
      <div>
        <div style="padding: 10px; border-bottom: 1px solid #ccc">
          <el-form
            label-position="right"
            size="mini"
            label-width="70px"
            @submit.native.prevent
          >
            <el-form-item label="显示屏数">
              <span @click="changeScreenNum">
                <el-radio
                  v-model="screenNum"
                  style="width: 80px"
                  :label="1"
                >一屏</el-radio>
              </span>
              <span @click="changeScreenNum">
                <el-radio v-model="screenNum" :label="2">两屏</el-radio>
              </span>
            </el-form-item>
            <el-form-item label="显示行数">
              <span @click="changeRowNum">
                <el-radio
                  v-model="rowNum"
                  style="width: 80px"
                  :label="1"
                >单行</el-radio>
              </span>
              <span @click="changeRowNum">
                <el-radio v-model="rowNum" :label="2">多行</el-radio>
              </span>
            </el-form-item>
            <el-form-item label="单行数量">
              <div>
                <span @click="changeNavNumPerRow">
                  <el-radio
                    v-model="navNumPerRow"
                    style="width: 80px"
                    :label="2"
                  >两个</el-radio>
                </span>
                <span @click="changeNavNumPerRow">
                  <el-radio
                    v-model="navNumPerRow"
                    style="width: 80px"
                    :label="3"
                  >三个</el-radio>
                </span>
              </div>
              <div>
                <span @click="changeNavNumPerRow">
                  <el-radio
                    v-model="navNumPerRow"
                    style="width: 80px"
                    :label="4"
                  >四个</el-radio>
                </span>
                <span @click="changeNavNumPerRow">
                  <el-radio v-model="navNumPerRow" :label="5">五个</el-radio>
                </span>
              </div>
            </el-form-item>
            <el-form-item label="显示标题">
              <el-checkbox
                v-model="showTitle"
                @change="changeShowTitle"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="colbar" @click="changeListShow">
          导航菜单配置，点击{{ listShow ? '折叠' : '展开' }}
          <i v-show="!listShow" class="el-icon-arrow-down"></i>
          <i v-show="listShow" class="el-icon-arrow-up"></i>
          <span
            style="padding-left: 15px; color: red"
          >{{ imageList.length }}条数据</span>
        </div>
        <div v-show="listShow">
          <draggable
            class="dragArea list-group"
            :list="imageList"
            @end="dragEnd"
          >
            <div
              v-for="(item, index) in imageList"
              :key="item._id"
              :label="index + 1"
              class="image-list"
            >
              <div>
                <el-upload
                  class="upload-demo"
                  :action="uploadPicturePath"
                  :on-success="handleUploaduccess"
                  :on-error="handleUploadError"
                  :before-upload="beforeUpload"
                  :show-file-list="false"
                >
                  <div>
                    <div class="uploadBtn" @click="uploadClick(item, index)">
                      <img
                        v-if="item.image"
                        style="width: 100%; height: 100%"
                        :src="item.image"
                      />
                      <i
                        v-if="!item.image"
                        class="el-icon-plus"
                        style="font-size: 42px"
                      ></i>
                    </div>
                  </div>
                </el-upload>
              </div>
              <div class="input-block">
                <el-input
                  v-model="item.title"
                  style="width: 180px; margin-top: 5px"
                  placeholder="标题"
                  @change="changeTitle(item, index)"
                />
                <el-input
                  v-model="item.link"
                  style="width: 180px; margin-top: 5px"
                  placeholder="跳转URL"
                  @change="changeImageLink(item, index)"
                />
                <div style="padding-top: 5px">
                  <span
                    title="清空图片和URL"
                    style="margin-left: 20px; cursor: pointer"
                    @click="clearItem(item, index)"
                  >
                    <i style="font-size: 18px" class="el-icon-back"></i>清空
                  </span>
                  <span
                    v-if="index > 0"
                    style="margin-left: 10px; cursor: pointer"
                    title="删除"
                    @click="removeItem(item, index)"
                  >
                    <i style="font-size: 18px" class="el-icon-delete"></i>删除
                  </span>
                </div>
              </div>
            </div>
          </draggable>
          <div class="flex-row-center">
            <el-button size="mini" @click="addItem">
              添加导航
            </el-button>
          </div>
        </div>

        <div style="border-bottom: 1px solid #ccc; padding-bottom: 5px">
          <div style="margin-top: 10px">
            <div style="margin: 10px">
              占位图
            </div>
            <div class="image-list">
              <div style="margin-top: -16px">
                <el-upload
                  class="upload-demo"
                  :action="uploadPicturePath"
                  :on-success="handleUploadPImagesuccess"
                  :on-error="handleUploadPError"
                  :before-upload="beforePUpload"
                  :show-file-list="false"
                >
                  <div>
                    <div class="uploadBtn">
                      <img
                        v-if="placeholder.image"
                        style="width: 100%; height: 100%"
                        :src="placeholder.image"
                      />
                      <i
                        v-if="!placeholder.image"
                        class="el-icon-plus"
                        style="font-size: 42px"
                      ></i>
                    </div>
                  </div>
                </el-upload>
              </div>
              <div class="input-block">
                <el-input
                  v-model="placeholder.title"
                  style="width: 180px; margin-top: 5px"
                  placeholder="标题"
                  @change="changePTitle"
                />
                <el-input
                  v-model="placeholder.link"
                  style="width: 180px; margin-top: 5px"
                  placeholder="跳转URL"
                  @change="changePImageLink"
                />
                <div style="padding-top: 5px">
                  <span
                    title="清空图片和URL"
                    style="margin-left: 20px; cursor: pointer"
                    @click="clearPItem"
                  >
                    <i style="font-size: 18px" class="el-icon-back"></i>清空
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 样式属性 begin -->
        <div class="el-card__header">
          样式属性
        </div>
        <el-form
          label-position="right"
          style="margin-top: 10px"
          size="mini"
          label-width="70px"
          @submit.native.prevent
        >
          <el-form-item label="图片倒角">
            <div>
              <span @click="changeRadius">
                <el-radio
                  v-model="radius"
                  style="width: 80px"
                  :label="0"
                >直角</el-radio>
              </span>
              <span @click="changeRadius">
                <el-radio v-model="radius" :label="1">圆角</el-radio>
              </span>
            </div>
            <div v-if="radius === 1" class="shadow-block">
              <div>圆角（半径）</div>
              <div style="padding: 10px">
                <el-slider
                  v-model="radius_value"
                  show-input
                  @change="changeRadiusValue"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="左右边距">
            <div style="margin-top: -5px; margin-left: 5px">
              <el-slider
                v-model="leftRightPad"
                :max="30"
                show-input
                @change="changeLeftRightPad"
              />
            </div>
          </el-form-item>
          <el-form-item label="上下边距">
            <div style="margin-top: -5px; margin-left: 5px">
              <el-slider
                v-model="upDownPad"
                :max="30"
                show-input
                @change="changeUpDownPad"
              />
            </div>
          </el-form-item>
          <el-form-item label="图标大小">
            <div style="margin-top: -5px; margin-left: 5px">
              <el-slider
                v-model="imageSize"
                :max="100"
                show-input
                @change="changeImageSize"
              />
            </div>
          </el-form-item>
          <el-form-item label="背景颜色">
            <div class="colorPicker">
              <div>
                <el-color-picker
                  v-model="bgColor"
                  show-alpha
                  @change="changeBgColor"
                />
              </div>
              <div>
                <span class="reset-span" @click="resetBgColor">重置</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="文字颜色">
            <div class="colorPicker">
              <div>
                <el-color-picker v-model="textColor" @change="changeColor" />
              </div>
              <div>
                <span class="reset-span" @click="resetColor">重置</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="文字大小">
            <div style="margin-top: -5px; margin-left: 5px">
              <el-slider
                v-model="textSize"
                :min="12"
                :max="100"
                show-input
                @change="changeTextSize"
              />
            </div>
          </el-form-item>
          <el-form-item label="行间距">
            <div style="margin-top: -5px; margin-left: 5px">
              <el-slider
                v-model="rowGutter"
                :min="0"
                :max="100"
                show-input
                @change="changeRowGutter"
              />
            </div>
          </el-form-item>
        </el-form>
        <!-- 样式属性 end -->
      </div>
    </editor-panel>
    <rule-config
      ref="ruleconfig"
      rule-type="content"
      :element-code="configSelectedItem._id"
      :activity-code="activityCode"
      :component-id="selectedComponent._id"
      :rules="rules"
      @callback="saveRuleConfig"
    />
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import draggable from 'vuedraggable'
import RuleConfig from '@/components/properties/common/RuleConfig'
import NavigateEditorExtends from './navigate.extends'
import tool from '@/util/tool'
import { MOS_API_HOST } from '@/config/default'
import EditorPanel from '@/components/properties/common/EditorPanel'

export default {
  components: {
    draggable,
    EditorPanel,
    RuleConfig,
  },
  extends: NavigateEditorExtends,
  props: {
    activityCode: {
      type: String,
      required: true
    },
  },
  data () {
    return {
      uploadPicturePath: '',
      rules: {},
      listShow: true,
      tag: true,
      screenNum: 1,
      rowNum: 1,
      navNumPerRow: 5,
      rowGutter: 8,
      imageSize: 74,
      radius: 0,
      radius_value: 8,
      leftRightPad: 0,
      upDownPad: 0,
      bgColor: '#FFFFFF',
      textColor: '#343434',
      textSize: 14,
      uploadItem: {},
      clickIndex: 0,
      imageList: [],
      uploading: false,

      configSelectedItem: {},
      configSelectedIndex: 0,
      placeholder: {
        image: '',
        title: '导航标题',
        _id: 'pidxxxx121211',
        link: '',
      },
      showTitle: true,
    }
  },
  computed: {
    ...mapGetters('step', ['steps', 'stepsl']),
    ...mapGetters('main', ['selectedComponent', 'pageContent']),
  },
  watch: {
    stepsl () {
      this.fillDataToForm()
    },
  },
  mounted () {
    this.uploadPicturePath = `${MOS_API_HOST}/activity/uploadPicture?shiro_sid=${tool.getUrlParam('shiro_sid')}`
    this.initData()
    this.fillDataToForm()
  },
  methods: {
    ...mapMutations('main', [
      'editComponent',
      'addComponentListItem',
      'removeComponentListField',
      'editComponentListItem',
      'updateChildListModelField',
    ]),
    ...mapMutations('step', ['stepsAdd1', 'stepLock'])
  }
}
</script>
<style lang="less" scoped>
@import url('index.less');
</style>
